<!DOCTYPE html>
<html>
	<head>
	<title>线性回归</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style>
			html { overflow-x: hidden; overflow-y: hidden; }
			.frame
			{
				height:40px;
				width:50px;
				position:absolute;
				top:0px;
				cursor:pointer;
				-webkit-app-region:no-drag;
				transition:all 0.1s;
			}
			.frame:hover
			{
				background-color:#12ba4d;
			}
			.frame_buttom
			{
				height:40px;
				width:50px;
				line-height:40px;
				text-align:center;
				color:#000;
				position:absolute;
				top:0px;
				left:0px;
				-webkit-app-region:no-drag;
				transition:transform 1.3s,color 0.1s;
				transform:rotate(0deg);
				font-family:微软雅黑;
			}
			.frame_buttom:hover
			{
				color:#fff;
			}
			.action
			{
				height:60px;
				width:60px;
				position:absolute;
				top:0px;
				right:-30px;
				font-size:40px;
				line-height:60px;
				text-align:center;
				color:#777;
				transition:all 1s;
				cursor:pointer;
			}
			.action:hover
			{
				transform:rotate(180deg);
				color:pink;
			}
			.title
			{
				position:absolute;
				top:5px;
				left:50%;
				transform:translate(-50%,0px);
				height:40px;
				font-size:40px;
				padding:15px;
				line-height:40px;
				text-align:center;
				background-color:#000;
				color:#fff;
				border-radius:20px;
				cursor:pointer;
			}
		</style>
		<script type="text/javascript">
			window.X=new Array();
			window.Y=new Array();
			function draw(e,X,Y) 
			{
				//alert(X)
				canvas=document.getElementById("points");
			    var ctx=canvas.getContext("2d");
				event=e||window.event;
			    var rect = canvas.getBoundingClientRect();
			    x = event.clientX - rect.left * (canvas.width / rect.width);
			    y = event.clientY - rect.top * (canvas.height / rect.height);
			    ctx.beginPath();
				ctx.arc(x,y,5,0,2*Math.PI);
				ctx.closePath();
            	ctx.fillStyle="#00cc47";
            	ctx.fill();
            	X.splice(0,0,x);
            	Y.splice(0,0,y);
            	ansys(X,Y);
			}
			sum_x=0;
			sum_y=0;
			function ansys(X,Y)
			{
				sum_x+=X[0];
				sum_y+=Y[0];
				var X_mean=sum_x/X.length;
				var Y_mean=sum_y/Y.length;
				var a_t=0;
				var a_b=0;
				for (var i=0;i<X.length;i++)
				{
					a_t+=(X[i]-X_mean)*(Y[i]-Y_mean);
					a_b+=(X[i]-X_mean)*(X[i]-X_mean);
				}
				a=a_t/a_b;
				b=Y_mean-a*X_mean;
				draw_line(a,b);
			}
			function draw_line(a,b)
			{
				if (a){}
				else
				{
					a="a";
					b="b";
				}
				document.getElementById("function_").innerHTML="y="+a+"x+"+b;
				c=document.getElementById("line");
				c.width=c.width;
				var ctx2=c.getContext("2d");
				y0=b;
				y1=a*1280+b;
				ctx2.moveTo(0,y0);
				ctx2.lineTo(1280,y1);
				ctx2.lineWidth=1;
				ctx2.stroke();
			}
			function reset()
			{
				var canvas=document.getElementById("points");
				canvas.width=canvas.width;
				var c=document.getElementById("line");
				c.width=c.width;
				X=[];
				Y=[];
				sum_x=0;
				sum_y=0;
				document.getElementById("function_").innerHTML="y=ax+b";
			}
			function date_ansys(X,Y,X_p)
			{
				var min_x=X[0];
				var max_x=X[0];
				var min_y=Y[0];
				var max_y=Y[0];
				for (var j=0;j<X.length;j++)
				{
					if (X[j]<min_x)
					{
						min_x=X[j];
					}
					if (Y[j]<min_y)
					{
						min_y=Y[j];
					}
					if (X[j]>max_x)
					{
						max_x=X[j];
					}
					if (Y[j]>max_y)
					{
						max_y=Y[j];
					}
				}
				dx=max_x-min_x;
				dy=max_y-min_y;
				reset();
				var canvas=document.getElementById("points");
				var ctx=canvas.getContext("2d");
				for (var k=0;k<X.length;k++)
				{
					X[k]=1280*(X[k]-min_x)/dx;
					Y[k]=720*(Y[k]-min_y)/dy;
					ctx.beginPath();
					ctx.arc(X[k],Y[k],5,0,2*Math.PI);
					ctx.closePath();
	            	ctx.fillStyle="#00cc47";
	            	ctx.fill();
				}
				window.X=X;
				window.Y=Y;
				ansys(X,Y);
			}
			function input_show()
			{
				document.getElementById("input_box").style.height="500px";
			}
			function input_hide()
			{
				document.getElementById("input_box").style.height="0px";
			}
			function date_ansys_()
			{
				input_hide();
				X0=document.getElementById("input_x").value;
				Y0=document.getElementById("input_y").value;
				P0=document.getElementById("pre_x").value;
				if (X0[4]!="[" && X0[4]!="(")
				{
					X0=X0.substr(0,3)+"["+X0.substr(4);
					X0+="]";
				}
				if (Y0[4]!="[" && Y0[4]!="(")
				{
					Y0=Y0.substr(0,3)+"["+Y0.substr(4);
					Y0+="]";
				}
				if (P0[4]!="[" && P0[4]!="(")
				{
					P0=P0.substr(0,3)+"["+P0.substr(4);
					P0+="]";
				}
				X0=X0.replace(/\(/,"[");
				X0=X0.replace(/\)/,"]");
				Y0=Y0.replace(/\(/,"[");
				Y0=Y0.replace(/\)/,"]");
				P0=P0.replace(/\(/,"[");
				P0=P0.replace(/\)/,"]");
				X=eval(X0);
				Y=eval(Y0);
				P=eval(P0);
				date_ansys(X,Y,P);
			}
		</script>
	</head>
	<body style="background-color:#bbb" onselectstart="return false">
		<div style="width:100%;height:40px;background-color:#bbb;opacity:1;position:fixed;top:0px;left:0px;-webkit-app-region:drag">
			
		</div>
		<div class="frame" style="left:0px" onclick="reset()"><div class="frame_buttom" onmouseover="this.style.transform='rotate(180deg)'" onmouseout="this.style.transform='rotate(0deg)'">↻</div></div>
		<div class="frame" style="left:50px;width:100px" onclick="input_show()"><div class="frame_buttom" style="width:100px"><nobr>输入数据</nobr></div></div>
		<canvas id="line" style="position:absolute;width:1280px;background-color:#eee;height:720px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-2;box-shadow:30px 30px 100px #aaa;" height="720" width="1280"></canvas>
		<canvas id="points" onclick="draw(event,X,Y)" style="position:absolute;width:1280px;height:720px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;cursor:pointer;" height="720" width="1280"></canvas>
		<div id="function_" style="position:absolute;bottom:20px;right:30px;padding:15px;background-color:#fff;border-radius:10px;font-size:20px;font-family:等线;opacity:0.8">y=ax+b</div>
		<div id="input_box" style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:0px;width:896px;background-color:#ddd;transition:all 0.2s;overflow:hidden">
			<div class="frame" style="right:0px" onclick="input_hide()" onmouseover="this.style.backgroundColor='#ff2f2f'" onmouseout="this.style.backgroundColor=''"><div class="frame_buttom" onmouseover="this.style.transform='rotate(180deg)'" onmouseout="this.style.transform='rotate(0deg)'">✕</div></div>
			<input id="input_x" name="input_x" type="text" style="outline:none;border:none;width:70%;height:30px;position:absolute;left:50%;bottom:50%;transform:translate(-50%,-60px);font-size:30px;padding:10px;font-family:等线" value="X = ">
			<input id="input_y" name="input_y" type="text" style="outline:none;border:none;width:70%;height:30px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:30px;padding:10px;font-family:等线" value="Y = ">
			<input id="pre_x" name="pre_x" type="text" style="outline:none;border:none;width:70%;height:30px;position:absolute;left:50%;top:50%;transform:translate(-50%,60px);font-size:30px;padding:10px;font-family:等线" value="P = ">
			<div id="ok" style="outline:none;border:none;width:60px;height:30px;position:absolute;left:50%;top:50%;transform:translate(-50%,150px);font-size:30px;padding:10px;font-family:等线;background-color:#12ba4d;text-align:center;color:#fff;cursor:pointer;transition:all 0.5s;border-radius:5px;line-height:30px;" onmouseover="this.style.backgroundColor='#00cc47'" onmouseout="this.style.backgroundColor='#12ba4d'" onclick="date_ansys_()">Go</div>
		</div>
		<div class="title" onclick="reset()">线性回归</div>
	</body>
</html>